<template>
  <div class="home" ref="home">

  </div>
</template>

<script>

import * as THREE from 'three'
import {OrbitControls} from "three/addons/controls/OrbitControls.js";
import addGeoMetry from "./addGeoMetry.js";
import circle from "./line.js";
let camera = null
let renderer = null
export default {
  name: "lesson1",
  data() {
    return {
      K: 5
    }
  },
  computed: {
    list: function () {
      var that = this;
      var list = [
        {
          name: '太阳',
          R: 10 * that.K, //天体半径
          URL: 'img/taiyang.jpg', //天体纹理路径
          revolutionR: 0
        }, {
          name: '水星',
          R: 2.5 * that.K, //天体半径
          URL: 'img/shuixing.jpg', //天体纹理路径
          revolutionR: 20 * this.K, //公转半径
        }, {
          name: '金星',
          R: 3 * that.K, //天体半径
          URL: 'img/jinxing.jpg', //天体纹理路径
          revolutionR: 30 * this.K, //公转半径
        }, {
          name: '地球',
          R: 3.2 * that.K, //天体半径
          URL: 'img/diqiu.jpg', //天体纹理路径
          revolutionR: 40 * this.K, //公转半径
        }, {
          name: '火星',
          R: 3.2 * that.K, //天体半径
          URL: 'img/huoxing.jpg', //天体纹理路径
          revolutionR: 50 * this.K, //公转半径
        }, {
          name: '木星',
          R: 5 * that.K, //天体半径
          URL: 'img/muxing.jpg', //天体纹理路径
          revolutionR: 60 * this.K, //公转半径
        }, {
          name: '土星',
          R: 3.5 * that.K, //天体半径
          URL: 'img/tuxing.jpg', //天体纹理路径
          revolutionR: 70 * this.K, //公转半径
        }, {
          name: '天王星',
          R: 3.5 * that.K, //天体半径
          URL: 'img/tianwangxing.jpg', //天体纹理路径
          revolutionR: 80 * this.K, //公转半径
        }, {
          name: '海王星',
          R: 4 * that.K, //天体半径
          URL: 'img/haiwangxing.jpg', //天体纹理路径
          revolutionR: 100 * this.K, //公转半径
        },
      ]
      return list
    }
  },

  mounted() {
    this.initThree();
    window.addEventListener('resize', this.onWindowResize);
  },
  methods: {
    initThree() {
      var that = this;

      // 创建场景
      var scene = new THREE.Scene()
      // 创建网格模型
      var geometry = new THREE.SphereGeometry(1, 100, 100);
      // 创建轨道
      var arc = new THREE.ArcCurve(0, 0, 1, 0, 2 * Math.PI, true);
      // 获取点数越多，圆弧越光滑
      var points = arc.getPoints(100); //返回一个vector2对象作为元素组成的数组
      var lineGeometry = new THREE.BufferGeometry();
      //setFromPoints方法的本质：遍历points把vector2转变化vector3
      lineGeometry.setFromPoints(points);
      var material = new THREE.LineBasicMaterial({
        color: 0x0f4984
      });

      this.list.forEach((type, index) => {
        var mesh = addGeoMetry(geometry, type.URL, type.R)
        mesh.name = type.name
        mesh.data = type
        mesh.angle = 2 * Math.PI * Math.random();
        scene.add(mesh); //网格模型添加到场景中
        // 创建轨道
        if (type.revolutionR) {
          var line = circle(lineGeometry, material, type.revolutionR)
          scene.add(line)
        }
      });

      //环境光
      var ambient = new THREE.AmbientLight(0xffffff, 0.6);
      scene.add(ambient);
      /**
       * 相机设置
       */
      const width = this.$refs.home.clientWidth;
      const height = this.$refs.home.clientHeight;
      //创建相机对象
      camera = new THREE.PerspectiveCamera(45, width / height, 1, 3000);
      camera.position.set(835.0912850575463, 835.0912850575461, 334.0365140230186); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

      /**
       * 创建渲染器对象
       */
      renderer = new THREE.WebGLRenderer({
        antialias: true, //开启锯齿
      });
      renderer.setSize(width, height); //设置渲染区域尺寸
      this.$refs.home.appendChild(renderer.domElement);

      // 渲染函数
      function render() {
        scene.children.forEach((type) => {
          if (type.type == 'Mesh') {
            type.rotateY(0.01)
            type.angle += 0.01;// 每次执行render角度新增加
            var x = type.data.revolutionR * Math.sin(type.angle);//地球x坐标计算
            var z = type.data.revolutionR * Math.cos(type.angle);//地球z坐标计算
            // 设置地球xz坐标，实现公转动画
            type.position.set(x, 0, z);
          }
        });
        renderer.render(scene, camera); //执行渲染操作
        requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
      }

      render();
      var controls = new OrbitControls(camera, renderer.domElement);
    },
    onWindowResize() {
      // Update camera
      const width = this.$refs.home.clientWidth;
      const height = this.$refs.home.clientHeight;
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
      console.log(camera.position.x + ',' + camera.position.y + ',' + camera.position.z)
      // Update renderer
      renderer.setSize(width, height);
    },
  },
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  background: #053d79;
  position: fixed;
}

</style>
